<template>
  <div class="sousuo">
    <div class="top">
      <h5>热门搜索</h5>
      <span></span>
    </div>
    <div class="bottom">
      <ul>
        <li v-for="item in hotlist" :key="item.wordid">
          <span v-if="item.keyword" @click="clickHot(item.keyword)">{{
            item.keyword
          }}</span>
        </li>
      </ul>
    </div>
    <div class="sousuojieguo" v-if="sousuojieguo">
      <div
        v-for="item in sousuojieguo"
        :key="item.proid"
        @click="xiangqing(item.proid)"
      >
        {{ item.proname }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { hotlist: null, sousuojieguo: null };
  },
  mounted() {
    this.hot();
    this.$bus.$on("sou", (val) => {
      if (!val) {
        this.sousuojieguo = null;
        return;
      }
      axios
        .get(`http://121.89.205.189:3000/api/pro/search/?keyword=${val}`)
        .then((res) => {
          this.sousuojieguo = res.data.data;
        });
    });
  },
  methods: {
    //热门搜索
    hot() {
      axios("http://121.89.205.189:3000/api/pro/hotword").then((res) => {
        this.hotlist = res.data.data;
      });
    },
    //点击热门搜索
    clickHot(res) {
      axios
        .get(`http://121.89.205.189:3000/api/pro/search/?keyword=${res}`)
        .then((res) => {
          this.sousuojieguo = res.data.data;
        });
    },
    //点击进入详情
    xiangqing(id) {
      this.sousuojieguo = null;
      this.$router
        .push({
          name: "xiangqing",
          query: { id: id },
        })
        .catch((err) => {
          return err;
        });
    },
  },
};
</script>


<style lang="less" scoped>
.sousuo {
  width: 100%;
  background: white;
  padding: 0 0.15rem;
  box-sizing: border-box;
  > .top {
    display: flex;
    justify-content: space-between;
    > h5 {
      padding: 0.1rem 0;
      font-size: 0.15rem;
    }
    > span {
      padding: 0.1rem 0;
      font-size: 0.13rem;
    }
  }
  .bottom {
    > ul {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 0.1rem;
      > li {
        > span {
          padding: 0 0.1rem;
          background: #f0f2f5;
          border-radius: 3px;
          margin-left: 5px;
          margin-top: 5px;
        }
      }
    }
  }
  .sousuojieguo {
    display: flex;
    flex-direction: column;
    > div {
      border-bottom: 1px solid #ccc;
      overflow: hidden; //溢出部分进行隐藏
      text-overflow: ellipsis; //溢出文本显示省略号
      white-space: nowrap; //强制文本不换行
      padding: 10px 0;
      font-size: 0.13rem;
    }
  }
}
</style>